<template>
  <div class="group-management">
    <el-row class="group-management-title">
      <!-- 每一栏+1当间隔 -->
      <el-col :span="1"></el-col>
      <el-col :span="8">成员</el-col>
      <el-col :span="8">群昵称</el-col>
      <el-col :span="4">群管理</el-col>
      <el-col :span="3" style="background-color:white"></el-col>
    </el-row>
    <div v-for="memberProfile in currentMemberList" :key="memberProfile.userID">
      <el-row class="member-row">
        <el-col :span="1">
          <el-avatar
            class="admin-avatar" 
            title="群主"
            :src="require('../../../assets/image/owner.png')"
            v-if="memberProfile.role === 'Owner'"
          ></el-avatar>
          <div @click="setGroupMemberRole(memberProfile)">
            <el-avatar
              class="admin-avatar"
              :class="myGroupRole === 'Owner' ? 'set-admin-role' : ''" 
              :src="require('../../../assets/image/admin.png')"
              :title="myGroupRole === 'Owner' ? '取消管理员' : '管理员'"
              v-if="memberProfile.role === 'Admin'"
            ></el-avatar>
          </div>
          <div 
            class="management-button" 
            title="设置为管理员"
            @click="setGroupMemberRole(memberProfile)"
            v-if="showSetGroupMemberRoleButton(memberProfile)" 
            >
            <i class="el-icon-user-solid"></i>
          </div>
        </el-col>
        <el-col :span="7">
          <div class="member-avatar">
            <Avatar :src="memberProfile.avatar"></Avatar>
          </div>
          <div :title="memberProfile.nick || memberProfile.userID">
            {{ memberProfile.nick || memberProfile.userID }}
          </div>
        </el-col>
        <el-col :span="1"></el-col>
        <el-col :span="7">
          <div :title="memberProfile.nameCard" v-if="!isEditNameCardVisible(memberProfile)">
            {{ memberProfile.nameCard }}
          </div>
          <div class="editNameCardInput" v-if="isEditNameCardVisible(memberProfile)">
            <input
              v-focus
              placeholder="请输入群昵称" 
              v-model="nameCard" maxlength="10" 
              @blur.prevent="setGroupMemberNameCard(memberProfile)" 
            />
          </div>
        </el-col>
        <el-col :span="1"></el-col>
        <el-col :span="1">
          <div
            class="management-button" 
            title="修改群昵称" 
            v-if="myGroupRole === 'Owner' || memberProfile.role === 'Member' || isCurrentUser(memberProfile)" 
            @click="editNameCard(memberProfile)"
            >
            <i class="el-icon-edit"></i>
          </div>
        </el-col>
        <el-col :span="1">
          <div 
            class="management-button"
            @click="setGroupMemberMuteTime(memberProfile)"
            title="禁言" 
            v-if="showMuteUntilButton(memberProfile)"
          >
            <i class="el-icon-turn-off-microphone"></i>
          </div>
          <div 
            @click="setGroupMemberMuteTime(memberProfile)"
            :title="showMuteUntilTitle(memberProfile)"
            v-if="muteUntilTime(memberProfile) > 0"
          >
            <i class="el-icon-turn-off-microphone" style="color:red"></i>
          </div>
        </el-col>
        <el-col :span="1">
          <div 
            class="management-button"
            @click="deleteGroupMember(memberProfile)"
            title="从本群中移除"
            v-if="myGroupRole === 'Owner' && memberProfile.userID !== currentUserProfile.userID"
          >
            <i class="el-icon-delete"></i>
          </div>
        </el-col>
        <el-col :span="4"></el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  data(){
    return {
      editNameCardUserID: '',
      nameCard: ''
    }
  },
  directives: {
    focus: {
      inserted: (el) => {
        el.focus();
      }
    }
  },
  computed:{
    ...mapState({
      currentMemberList: state => state.group.currentMemberList,
      currentUserProfile: state => state.user.currentUserProfile,
      currentGroupProfile: state => state.group.currentGroupProfile,
      current: state => state.current
    }),
    myGroupRole(){
      const myGroupProfile = this.currentMemberList.filter(item => item.userID === this.currentUserProfile.userID);
      return myGroupProfile[0].role === 'Owner' ? 'Owner' : 'Admin';
    }
  },
  methods:{
    isCurrentUser(memberProfile){
      return memberProfile.userID === this.currentUserProfile.userID;
    },
    editNameCard(memberProfile){
      this.nameCard = memberProfile.nameCard;
      this.editNameCardUserID = memberProfile.userID;
    },
    isEditNameCardVisible(memberProfile){
      return this.editNameCardUserID === memberProfile.userID;
    },
    setGroupMemberNameCard(memberProfile){
      this.editNameCardUserID = '';
      if(!this.nameCard.trim()){
        // this.$store.commit('showMessage', { message: '暂不支持设置群昵称为空' , type: 'warning' });
      } else if(this.nameCard.trim() !== memberProfile.nameCard){
        this.$store.dispatch('setGroupMemberNameCard', { 
          groupID: this.currentGroupProfile.groupID ,
          userID: memberProfile.userID,
          nameCard: this.nameCard
        });
      }
    },
    setGroupMemberRole(memberProfile){
      if(this.myGroupRole === 'Owner'){
        const role = memberProfile.role === 'Admin' ? this.TIM.TYPES.GRP_MBR_ROLE_MEMBER : this.TIM.TYPES.GRP_MBR_ROLE_ADMIN;
        this.$store.dispatch('setGroupMemberRole', { 
          groupID: this.currentGroupProfile.groupID,
          userID: memberProfile.userID,
          role: role
        });
      }
    },    
    muteUntilTime(memberProfile){
      return parseInt(memberProfile.muteUntil - this.current/1000);
    },
    showSetGroupMemberRoleButton(memberProfile){
      // 群主可以设置管理员，私有群和音视频聊天室不支持设置管理员
      return this.myGroupRole === 'Owner' && memberProfile.role === 'Member' && this.currentGroupProfile.type !== this.TIM.TYPES.GRP_PRIVATE &&  this.currentGroupProfile.type !== this.TIM.TYPES.GRP_AVCHATROOM;
    },
    showMuteUntilButton(memberProfile){
      // 私有群不支持禁言，群主可以禁言所有人，管理员只能禁言普通成员
      return this.currentGroupProfile.type !== this.TIM.TYPES.GRP_PRIVATE && !this.isCurrentUser(memberProfile) && (this.myGroupRole === 'Owner' || memberProfile.role === 'Member') && this.muteUntilTime(memberProfile) < 0;
    },
    showMuteUntilTitle(memberProfile){
      let title = '禁言中，还有' + this.muteUntilTime(memberProfile) + '秒';
      if(this.myGroupRole === 'Owner' || memberProfile.role === 'Member'){
        title = title + '，点击取消禁言';
      }
      return title;
    },
    setGroupMemberMuteTime(memberProfile){
      let muteTime = 0;
      // 判断是否有权限修改禁言状态，场景：已被禁言的用户按钮被点击
      if(this.myGroupRole === 'Owner' || memberProfile.role === 'Member'){
        if(this.muteUntilTime(memberProfile) > 0){
          muteTime = 0;
        } else {
          // 默认禁言一天
          muteTime = 86400;
        }
        this.$store.dispatch('setGroupMemberMuteTime', { 
          groupID: this.currentGroupProfile.groupID ,
          userID: memberProfile.userID,
          muteTime: muteTime
        });
      }
    },
    deleteGroupMember(memberProfile){
      this.$store.dispatch('deleteGroupMember', { 
        groupID: this.currentGroupProfile.groupID ,
        userIDList: [memberProfile.userID],
        reason: '你被踢了！'
      });
    }
  }
}
</script>

<style scoped>
.group-management {
  width: 480px;
}
.group-management div{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.group-management .el-col {
  height: 20px;
}
.group-management i{
  padding: 3px;
  width: 20px;
  height: 20px;
}
.group-management-title {
  background-color: #e7e7e7;
  color: #808080;
}
.member-row {
  margin-top: 5px;
}
.member-row:hover .management-button{
  display: inline;
  cursor: pointer;
}
.admin-avatar {
  padding: 3px;
  width: 20px;
  height: 20px;
  background-color: white;
}
.set-admin-role {
  cursor: pointer;
}
.member-avatar {
  float: left;
  width: 20px;
  height: 20px;
  padding-right: 10px;
}
.management-button {
  display: none;
}
.editNameCardInput input{
  width: 90%;
  height: 16px;
  line-height: 16px;
  font-size: 14px;
  padding: 0 5px;
  border-radius: 4px;
  border:1px solid #DCDFE6;
}
</style>